<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一封给你的信</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');

        :root {
            --text-color: rgba(255, 255, 255, 0.85);
            --highlight-color: #ffc107;
            --bg-color: #0c0a18;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            font-family: 'Noto Serif SC', serif;
            overflow-x: hidden;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .starry-sky {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(1px 1px at 20% 30%, white, transparent),
                radial-gradient(1px 1px at 80% 10%, white, transparent),
                radial-gradient(1px 1px at 50% 50%, white, transparent),
                radial-gradient(2px 2px at 90% 70%, white, transparent),
                radial-gradient(2px 2px at 30% 90%, white, transparent),
                radial-gradient(1px 1px at 10% 80%, white, transparent),
                radial-gradient(2px 2px at 40% 20%, white, transparent);
            background-size: 100% 100%;
            animation: move-stars 200s linear infinite;
            z-index: -1;
        }

        @keyframes move-stars {
            from { transform: translateY(0); }
            to { transform: translateY(-2000px); }
        }

        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 10vh 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .content-section {
            width: 100%;
            max-width: 500px;
            min-height: 80vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 1.5s ease-out, transform 1.2s ease-out;
        }

        .content-section.visible {
            opacity: 1;
            transform: translateY(0);
        }

        p {
            font-size: 1.1rem;
            line-height: 2.2;
            margin-bottom: 2rem;
        }

        .highlight-special {
            position: relative;
            font-size: 1.3rem;
            font-weight: 700;
            color: white;
            padding: 2rem 0;
            text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
        }

        .scroll-down {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.7);
            animation: bounce 2s infinite;
        }

        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateX(-50%) translateY(0);
            }
            40% {
                transform: translateX(-50%) translateY(-10px);
            }
            60% {
                transform: translateX(-50%) translateY(-5px);
            }
        }
        
        .effect-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 10;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            opacity: 0;
        }
        
        /* 氧气效果 */
        .oxygen-effect .particle {
            background-color: #00e5ff;
            animation: rise 5s ease-in infinite;
        }
        
        @keyframes rise {
            0% {
                transform: translateY(0) scale(1);
                opacity: 1;
            }
            100% {
                transform: translateY(-100vh) scale(0.3);
                opacity: 0;
            }
        }

        /* 阳光效果 */
        .sunshine-effect {
            background: radial-gradient(circle at 50% -20%, rgba(255, 215, 0, 0.5), transparent 60%);
            opacity: 0;
            transition: opacity 2s ease-in-out;
        }
        .sunshine-effect.active {
            opacity: 1;
        }

        .final-choice {
            margin-top: 4rem;
        }

        .final-choice p {
            font-size: 0.9rem;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.6);
        }

        @media (max-width: 600px) {
            p {
                font-size: 1rem;
                line-height: 2.1;
            }
            .highlight-special {
                font-size: 1.15rem;
            }
        }

    </style>
</head>
<body>
    <div class="starry-sky"></div>
    <div class="effect-container" id="oxygen-container"></div>
    <div class="effect-container sunshine-effect" id="sunshine-container"></div>

    <div class="container">
        
        <div class="content-section" id="intro">
            <div>
                <p>嘿嘿，不好意思啦，这几天好像有点打扰你了。</p>
                <p>我只是想遵从内心，不留遗憾地勇敢一次，希望没给你带来压力。</p>
            </div>
            <div class="scroll-down">v</div>
        </div>

        <div class="content-section">
            <p>今天写下这些文字，只是想为内心那份涌动了许久的情感找到一个出口。</p>
             <p>这份心动，其实比你想象的要早。你大概从未察觉吧？我总是在人群中，悄悄地望向你。</p>
        </div>

        <div class="content-section" id="oxygen-trigger">
            <p class="highlight-special">那是一种很奇妙的感觉，像在沉闷的深海里，突然呼吸到了一口至纯的氧气，整个世界瞬间被点亮，灵魂因一种巨大的满足感而战栗，而后归于平静。</p>
        </div>

        <div class="content-section">
            <p>可惜，我偏偏是那种习惯于隐藏自己的人，在情感的表达上，像个十足的懦夫，总是端着，不敢流露分毫。</p>
            <p>现在想来，如果在培训的时候能多跟你说说话，能邀你每天一起散散步，该有多好。</p>
        </div>

        <div class="content-section">
            <p>你或许会以为我的胆怯，是源于我们之间的距离，或是其他现实的阻碍。并非如此。</p>
             <p>我常说你对爱情的期待太过理想，可我又何尝不是呢？只是现实的声音太过嘈杂，让我一度怀疑，那份纯粹的坚持是否还值得。</p>
        </div>

        <div class="content-section">
            <p>我曾偷偷地想，如果能和你在一起，我能否有勇气抛下一切，奔向你？</p>
            <p class="highlight-special">而这个念头，在望向你的那一刻，问题的答案都无比清晰：我能，只要那个人是你。</p>
        </div>

        <div class="content-section">
             <p>我知道，我说这种话你可能会觉得我疯了，心里想“我跟你很熟吗？装什么深情，有点恶心”。但我对自己这个想法，没有任何疑问。</p>
            <p>我知道自己是什么样的人，于我而言，这世上有些东西，是比生命本身更重要的。为了爱情，我愿意成为那个献上一切的信徒。</p>
        </div>
        
        <div class="content-section">
            <p>这种近乎固执的信念，或许不被理解，甚至会令人感到沉重与畏惧——毕竟，“爱人先爱己”才是如今最稳妥的信条。</p>
            <p>我也认同它的道理，却始终无法在自己身上践行。我总想把完整的自己毫无保留地交出去，让你看，这就是我灵魂的模样——它可能有点笨拙，可能过于炽热，但它不加掩饰，坦诚得有些傻气。</p>
        </div>

        <div class="content-section">
             <p>如果不出意外，那个怂怂的我，应该会把这份感情永远埋在心里。毕竟我们离那么远，我又不是什么天选之人，你怎么可能会看上我呢？</p>
             <p>但没想到，命运居然让我能与你度过那么美好的一天。</p>
        </div>

        <div class="content-section" id="sunshine-trigger">
            <p>你的温柔、你的俏皮、你的感性，一切的一切都让我沉迷和回味。</p>
            <p class="highlight-special">当你在我身边，我感觉整个世界都充满了阳光，身体里有用不完的能量，就连周围的空气都好像变成了甜的，任何语言都无法形容那一天的美好。</p>
        </div>
        
        <div class="content-section">
            <p>也是那天的你，让我产生了一种错觉，一种“或许你对我也并非毫无感觉”的错觉。正是这份错觉，给了我此刻坦白的全部勇气。</p>
        </div>

        <div class="content-section">
            <p>我本来想着，临走的时候一定要告诉你我的心意。这没什么不好意思的，我觉得这份感情很纯粹，就是对你的一种欣赏和赞美。</p>
            <p>但又怕太急了会吓到你，反而失去了那最后一丝可能，所以打算在线上慢慢聊，让你多了解我一点。</p>
        </div>

        <div class="content-section">
            <p>但，故事的发展好像和我想的不太一样。我感觉再这样下去，会磨损掉这份记忆最初的美好。所以，我还是决定直接告诉你。</p>
        </div>

        <div class="content-section">
            <p>我可能只是你生命里的一个过客，在你眼里或许平平无奇的过客。但这个过客，在内心中曾热烈地爱慕过你。</p>
            <p>说这些话，我只是希望，你能知道这份情感的存在。真的不希望给你带去压力，更别对我产生厌烦。</p>
             <p>如果可以，请把这番话，看作是信徒对女神的礼赞，纯粹，且不染尘埃。</p>
        </div>

        <div class="content-section">
            <p>以上，就是我想让你知道的所有心里话。</p>
            <div class="final-choice">
                <p>你可以回复，也可以不回复。</p>
                <p>我的心事，已经说完。</p>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const sections = document.querySelectorAll('.content-section');
            const oxygenTrigger = document.getElementById('oxygen-trigger');
            const oxygenContainer = document.getElementById('oxygen-container');
            const sunshineTrigger = document.getElementById('sunshine-trigger');
            const sunshineContainer = document.getElementById('sunshine-container');

            let oxygenEffectActive = false;

            // 创建氧气泡泡
            function createParticles() {
                if (!oxygenEffectActive) return;
                const particleCount = 2; // 每次产生的粒子数量
                for (let i = 0; i < particleCount; i++) {
                    const particle = document.createElement('div');
                    particle.classList.add('particle');
                    const size = Math.random() * 8 + 2; // 2px to 10px
                    particle.style.width = `${size}px`;
                    particle.style.height = `${size}px`;
                    particle.style.left = `${Math.random() * 100}vw`;
                    particle.style.bottom = `-${size}px`;
                    particle.style.animationDelay = `${Math.random() * 5}s`;
                    particle.style.animationDuration = `${Math.random() * 5 + 5}s`; // 5 to 10s
                    oxygenContainer.appendChild(particle);
                    
                    // 动画结束后移除粒子
                    particle.addEventListener('animationend', () => {
                        particle.remove();
                    });
                }
            }
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('visible');

                        // 触发氧气效果
                        if (entry.target === oxygenTrigger) {
                            if (!oxygenEffectActive) {
                                oxygenEffectActive = true;
                                setInterval(createParticles, 200);
                            }
                        }
                        
                        // 触发阳光效果
                        if (entry.target === sunshineTrigger) {
                            sunshineContainer.classList.add('active');
                        }

                    } else {
                        // 离开视口时
                        // 停止氧气效果
                        if (entry.target === oxygenTrigger) {
                            oxygenEffectActive = false;
                            // 这里不清空，让现有泡泡继续动画
                        }
                        // 停止阳光效果
                        if (entry.target === sunshineTrigger) {
                            sunshineContainer.classList.remove('active');
                        }
                    }
                });
            }, {
                threshold: 0.5 // 当元素50%可见时触发
            });

            sections.forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>